<style lang="scss" scoped>
@import "../../css/list.scss";
header {
  .head {
    height: 1.5rem;
  }
  .btns {
    padding: 0.07rem;
    li {
      padding: 0.08rem;
      height: 0.45rem;
    }
  }
}
</style>

<template>
    <div class="ok_exchange full bgfff">
        <header>
            <div class="head box-center bgf4 font-16 cfff">
                <div class="font-22 padding-b10">
                    <i class="iconfont icon-shouji"></i>兑换成功</div>
                <p class="padding-b5">平台审核通过后将立即发货请耐心等待</p>
                <p>{{commodityInfo.commodityName}}在招手哦~</p>
            </div>
            <div class=" padding-lr15">
                <div class="padding-t20">张三
                    <span class="margin-l10">{{site.tel}}</span>
                </div>
                <div class="font-12 c81 padding-tb10">{{site.provinceName}} {{site.cityName}} {{site.districtName}} {{site.detailed}}</div>
            </div>
            <ul class="flex-col btns cfff">
                <li class="box1">
                    <div class="bor-r bgred full box-center" @click="toRouter('shop_index')">继续逛逛</div>
                </li>
                <li class="box1">
                    <div class="bor-r bgf4 full box-center" @click="toRouter('exchange_record')">查看兑换</div>
                </li>
            </ul>
        </header>
        <main>
            <div class="interval"></div>
            <div class="commodity  padding-15 flex-col">
                <div class="img-bg commodity_img" :style="{backgroudIm:`url(${imgurl})`}"></div>
                <div class="box1 padding-l15 flex-row">
                    <div class="box1 flex-col flex-middle">{{commodityInfo.commodityName}}</div>
                    <div class="flex-col box1 flex-middle">
                        <div class="box1 c82">
                            <span class="cred">{{commodityInfo.commodityPrice}}</span>积分
                        </div>
                        <span>*{{commodityInfo.number}}</span>
                    </div>
                </div>
            </div>
            <ul class="price padding-lr15">
                <li class="flex-col border-t">
                    <div class="box1">运费：</div>
                    <span class="cred">￥{{commodityInfo.sendPrice}}</span>
                </li>
                <li class="flex-col border-t border-b">
                    <div class="">买家留言：</div>
                    <span class="c82 box1">{{commodityInfo.msg | toMsg}}</span>
                    <!-- <input type="text" placeholder="无" readonly class="box1"> -->
                </li>
            </ul>
            <div class="c82 padding-15">
                <div class="padding-t5">订单编号： {{orderId}}</div>
                <div class="padding-t5">兑换时间：{{orderTime | toTime}}</div>
            </div>
        </main>
    </div>
</template>

<script>
export default {
  name: "ok_exchange",
  data() {
    return {
      imgurl: "",
      commodityInfo: {},
      site: {},
      orderId: "",
      orderTime: ""
    };
  },
  created() {},
  filters: {
    toMsg(str) {
      return str ? str : "无";
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.commodityInfo = that.getCache("exchange"); // 获取商品信息
      that.site = that.getCache("sendSite");
      that.orderId = that.$route.query.id;
      that.orderTime = that.$route.query.time;

      that.removeCache("sendSite");
      that.removeCache("exchange");
    });
  },
  methods: {

  }
};
</script>
